import React from "react";
import Router from './App.router'

const container = {
  width: '1000px',
  margin: '0 auto',
  color: '#333333'
}
const header = {
  height: '60px',
  lineHeight: '60px'
};
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      open: true,
    }
  }
  render() {
    // 换肤
    // bug 选中问题
    const tabBG = (event) => {
      event.preventDefault();
      const root = document.getElementById('root');
      if (!this.setState.open) {
        document.body.style.backgroundColor = 'black';
        document.body.style.transitionDuration = '150ms';
        document.body.className = 'black';
      } else {
        document.body.style.backgroundColor = 'white';
        document.body.style.transitionDuration = '150ms';
        document.body.className = '';
      }
      this.setState.open = !this.setState.open;
    }
    return (
      <div style={container}> 
        <h1>Hello webpack</h1>
        <div style={{color: '#999999'}}>
          搞技术的每天都在阅读，但是很多时候，要么就是收藏夹吃灰了，要么就是看完就忘。只留下一个非常浅的印象，后面再想找也找不到或者直接就想不起来。
          只有总结，后期能更高效的学习理解和参考复习。
        </div>
        <div style={header}>
          <a href="#/home">home</a>
          <span> | </span>
          <a href="#/about">about</a>
          <span> | </span>
          <a href="#/Interview-questions">面试题</a>
          <span> | </span>
          <a onClick={tabBG} style={{cursor: "pointer"}}>换肤</a>
        </div>
        <Router/>
      </div>
    );
  }
}

export default App;
